<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/css/styles.css" />
  </head>

  <body>
    <div class="main">
      <header class="header">
        <article class="container">
          <div class="header__container">
            <h2 class="header__subtitle">FEEL THE EXCITEMENT</h2>
            <h1 class="header__title">GET READY</h1>
            <h2 class="header__subtitle">WE ARE COMMING SOON</h2>
          </div>

          <div class="header__countdown" id="countdown">
            <div class="header__countdown__item">
              <header class="header__countdown__item__container">
                <p class="header__countdown__item__number">0</p>
                <p class="header__countdown__item__number">0</p>
              </header>
              <p class="header__countdown__item__title">DAYS</p>
            </div>
            <div class="header__countdown__item">
              <header class="header__countdown__item__container">
                <p class="header__countdown__item__number">0</p>
                <p class="header__countdown__item__number">0</p>
              </header>
              <p class="header__countdown__item__title">HOURS</p>
            </div>
            <div class="header__countdown__item">
              <header class="header__countdown__item__container">
                <p class="header__countdown__item__number">0</p>
                <p class="header__countdown__item__number">0</p>
              </header>
              <p class="header__countdown__item__title">MIN</p>
            </div>
          </div>
        </article>
      </header>

      <div class="join-us">
        <article class="container">
          <h2 class="join-us__title">Want to join us?</h2>
          <div class="join-us__container">
            <div class="join-us__map">
              <div class="join-us__map__decoration__top-left"></div>
              <div class="join-us__map__decoration__top-right"></div>
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d621.2294973381855!2d-0.01421247157845853!3d51.47801963465255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48760288ce1113b7%3A0x6862e6d5c0e44021!2zMTczLTE4NSBHcmVlbndpY2ggSGlnaCBSZCwgR3JlZW53aWNoLCBMb25kb24gU0UxMCA4SkEsINCS0LXQu9C40LrQvtCx0YDQuNGC0LDQvdC40Y8!5e0!3m2!1sru!2skz!4v1574769563078!5m2!1sru!2skz"
                width="100%"
                height="100%"
                frameborder="0"
                style="border: 0"
                allowfullscreen=""
              ></iframe>
            </div>
            <form class="join-us__form">
              <div class="join-us__form__decoration__top-left"></div>
              <div class="join-us__form__decoration__top-right"></div>
              <label class="join-us__form__input join-us__form__name"
                ><input placeholder="Your name"
              /></label>
              <label class="join-us__form__input join-us__form__message"
                ><input placeholder="Your email"
              /></label>
              <label class="join-us__form__input join-us__form__email">
                <textarea placeholder="Your message"></textarea>
              </label>
              <button class="join-us__form__button">Submit</button>
            </form>
          </div>
        </article>
      </div>

      <footer class="footer">
        <article class="container">
          <ul class="footer__location">
            <li class="footer__location__item">
              <i>185 Greenwich High Road</i>
            </li>
            <li class="footer__location__item"><i>London SE10 8JA</i></li>
            <li class="footer__location__item"><i>United Kingdom</i></li>
            <li class="footer__location__item"><i>0044 987654321</i></li>
          </ul>

          <ul class="footer__socials">
            <li class="footer__socials__item">
              <a class="icon icon-twitter" href="//twitter.com">twitter</a>
            </li>
            <li class="footer__socials__item">
              <a class="icon icon-skype" href="//skype.com">skype</a>
            </li>
            <li class="footer__socials__item">
              <a class="icon icon-pinterest" href="//pinterest.com"
                >pinterest</a
              >
            </li>
          </ul>
        </article>
      </footer>
    </div>
    <script src="./countdownTimer.js"></script>
  </body>
</html>
